<template>
 <div class="detailNav">
     <nav-bar>
         <template v-slot:left>
             <div class="back" @click="backClick">
                <img src="@assets/img/common/back.svg" alt="">
             </div>     
         </template>
          <template v-slot:center>
              <div class="detailNavItem">
                  <span :key="item" v-for="(item,index) in navContent" 
                  :class="{active: index === currentIndex}"
                  @click="titleClick(index)"
                  >
                  {{ item }}</span>   
               </div>             
          </template>
     </nav-bar> 
    
 </div>
</template>

<script>
import NavBar from '@components/common/navbar/NavBar'

export default({
    name:'DetailNav',
    data(){
        return{
            navContent:['商品','参数','评论','推荐'],
            currentIndex:0
        }
    },
    components:{
        NavBar
    },
    methods:{
        titleClick(index){
            this.currentIndex = index
            /* 子传父 */
            this.$emit('cut',index)
        },
        backClick(){
            this.$router.back()
        },
    }
})

</script>

<style scoped>
.detailNavItem{
    display: flex;
}
.detailNavItem span{
    flex: 1;
    text-align: center;
}

.active{
    color: var(--color-high-text);    
}
.back img{
    margin-top: 12px;
}
</style>
